'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    StatusBar,
} from 'react-native';

import NavBar from '../../../../core/component-biz/comp.nav-swich-bar';
import UserInfoBar from '../../../../core/component-biz/comp.user-info-bar';
import IconButton from '../../../../core/component/comp.icon-button';
import GridView from '../../../../core/component/comp.grid-view';
import PeopleInfoItem from "../../../../core/component-biz/comp.people-info-panel";
import Util from "../../../../core/utils/util";
import Color from '../../../../core/constant/color';
class YuanwangMainScene extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: "愿望",
        headerTintColor: "white",
        header: null,
        showFilterPanel:false,
    });

    constructor(props) {
        super(props);
        this.state = {
            isShowWishMode: true,
            filterType:'全部',
            filterWhere:'全部',
        }
    }

    onSelectedModeChanged(selectedIndex) {
        this.setState({
            isShowWishMode: selectedIndex == 0,
        });
    }

    componentDidMount() {

    }

    genButtonGroupUI() {
        return (
            <View style={styles.bottomButtonGroup}>
                <IconButton style={styles.btnItem} iconSource={require('../../../../img/icon_small_help.png')}
                            title="去帮忙"/>
                <IconButton style={styles.btnItem} iconSource={require('../../../../img/icon_small_love.png')}
                            title="27"/>
                <IconButton style={styles.btnItem} title="私聊"/>
            </View>
        );
    }

    onPressJumpToDetail(userInfo) {
        const {navigate} = this.props.navigation;
        navigate('YuanwangDetail', {title: userInfo.nickName, userInfo: userInfo});
    }

    onPressBigHeadImage(userInfo) {
        const {navigate} = this.props.navigation;
        console.log(this.props.navigation, "----->this.props.navigation")
        navigate('PhotoDisplay', {
            title: userInfo.nickName,
            photos: Util.convertImageUrlsToPhotos(userInfo.imageUrlList),
        });

        // 实例，带右侧...的版本
        // navigate('PhotoDisplay', {
        //     title: userInfo.nickName,
        //     photos: Util.convertImageUrlsToPhotos(userInfo.imageUrlList),
        //     onRight: () => {
        //         Util.showToast('这里打开更多')
        //     },
        // });
    }

    genBigUserInfoPanelUI(userInfo, index) {
        return (
            <View key={`big-user-info-panel-${index}`} style={styles.bigUserInfoPanel}>
                <View style={styles.topUserInfoBar}>
                    <UserInfoBar headUrl={userInfo.headUrl} title={userInfo.nickName} subTitle={userInfo.city}
                                 rightTitle={userInfo.time} onPress={this.onPressJumpToDetail.bind(this, userInfo)}/>
                </View>
                <View style={styles.midUserImagePanel}>
                    <TouchableOpacity onPress={this.onPressBigHeadImage.bind(this, userInfo)}>
                        <Image style={styles.midUserImage} source={userInfo.imageUrlList[0]}/>
                    </TouchableOpacity>
                </View>
                <View style={styles.midUserDescriptionPanel}>
                    <Text style={styles.midUserDescription}>{userInfo.desc}</Text>
                </View>
                <View style={styles.bottomUserInfoPanel}>
                    <Text style={styles.userInfoText}>{userInfo.age}岁 | {userInfo.height}cm | {userInfo.weight}kg</Text>
                </View>
                {this.genButtonGroupUI()}
            </View>
        );
    }

    genUserInfoListUI() {
        const userList = [
            {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_01.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_01.jpg'), require('../../../../img/icon_head_02.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '刚刚',
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_02.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_02.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_03.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_03.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_04.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_04.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
            },
        ];
        const userListUI = userList.map((userInfo, index) => {
            return this.genBigUserInfoPanelUI(userInfo, index)
        })
        return userListUI
    }

    genPeopleInfoListUI() {
        const items = [
            {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_01.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_01.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '刚刚',
                passVideo: true,
                shortDesc: '做最好的自己，永远🌺年轻🌺~~',
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_02.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_02.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
                passVideo: true,
                shortDesc: '自信的人，永远最美，👍👍👍加油⛽️️⛽️️⛽️️',
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_03.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_03.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
                passVideo: false,
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_04.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_04.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
                passVideo: false,
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_05.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_05.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
                passVideo: true,
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_06.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_06.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
                passVideo: true,
            },
        ];
        return (
            <GridView removeClippedSubviews={false} pageSize={5} initialListSize={5} groupStyle={styles.gridViewGrop} items={items} itemsPerRow={2}
                      renderItem={this.genPeopleInfoItemUI}/>
        )
    }

    genPeopleInfoItemUI = (item, index) => {
        return <PeopleInfoItem key={`people-info-item-${index}`} item={item}
                               onPress={this.onPressJumpToDetail.bind(this, item)}/>
    }

    genWishModeUI() {
        return this.genUserInfoListUI()
    }

    genPeopleModeUI() {
        return this.genPeopleInfoListUI();
    }

    genAutoModeUI() {
        const {isShowWishMode} = this.state
        if (isShowWishMode) {
            return this.genWishModeUI()
        } else {
            return this.genPeopleModeUI()
        }
    }

    onPressFilterBtn=()=>{
        const {showFilterPanel} = this.state
        this.setState({
            showFilterPanel:!showFilterPanel,
        });
    }

    onPressFilterType(type){
        this.setState({filterType:type});
    }

    onPressFilterWhere(where){
        this.setState({filterWhere:where});
    }

    genFilterPanelUI(){
        const {showFilterPanel,filterType,filterWhere} = this.state
        const activeBtnStyle = styles.filterBtnActive;
        if(showFilterPanel){
            return (
                <View style={styles.filterPanel}>
                    <View style={styles.filterTypePanel}>
                        <View style={styles.filterTitlePanle}>
                            <Text style={styles.filterTitle}>想要看到的用户</Text>
                        </View>
                        <View style={styles.filterTypeGroup}>
                            <IconButton title="全部" style={[styles.filterBtn,filterType=='全部' && activeBtnStyle]} onPress={this.onPressFilterType.bind(this,"全部")}/>
                            <IconButton title="男" style={[styles.filterBtn,filterType=='男' && activeBtnStyle]} onPress={this.onPressFilterType.bind(this,"男")}/>
                            <IconButton title="女" style={[styles.filterBtn,filterType=='女' && activeBtnStyle]} onPress={this.onPressFilterType.bind(this,"女")}/>
                            <IconButton title="大叔" style={[styles.filterBtn,filterType=='大叔' && activeBtnStyle]} onPress={this.onPressFilterType.bind(this,"大叔")}/>
                        </View>
                    </View>
                    <View style={styles.filterWherePanel}>
                        <View style={styles.filterTitlePanle}>
                            <Text style={styles.filterTitle}>范围</Text>
                        </View>
                        <View style={styles.filterTypeGroup}>
                            <IconButton title="全部" style={[styles.filterBtn,filterWhere=='全部' && activeBtnStyle]} onPress={this.onPressFilterWhere.bind(this,"全部")}/>
                            <IconButton title="附近" style={[styles.filterBtn,filterWhere=='附近' && activeBtnStyle]} onPress={this.onPressFilterWhere.bind(this,"附近")}/>
                        </View>
                    </View>
                </View>
            );
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <NavBar onSelectChanged={this.onSelectedModeChanged.bind(this)} onRightPress={this.onPressFilterBtn}/>
                {this.genFilterPanelUI()}
                <ScrollView style={styles.scrollView}>
                    {this.genAutoModeUI()}
                </ScrollView>
            </View>
        )
    }

}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#EBEBEB',
    },
    scrollView: {},
    gridViewGrop: {
        justifyContent: 'space-between',
        // borderWidth:1,
        padding: 4,
    },
    bigUserInfoPanel: {
        backgroundColor: 'white',
        marginBottom: 4,
    },
    topUserInfoBar: {
        height: 55,
        backgroundColor: 'white',
    },
    midUserImagePanel: {},
    midUserImage: {
        height: 295,
        width: '100%',
        resizeMode: 'cover',
        backgroundColor: 'white',
    },
    midUserDescriptionPanel: {
        padding: 8,
    },
    midUserDescription: {
        fontSize: 14,
    },
    bottomUserInfoPanel: {
        paddingLeft: 8,
        paddingRight: 8,
    },
    userInfoText: {
        fontSize: 12,
        color: '#979797',
    },
    bottomButtonGroup: {
        padding: 8,
        flexDirection: 'row',
    },
    btnItem: {
        width: 100,
        marginRight: 8,
    },
    filterPanel:{
        // height:135,
        width:'100%',
        backgroundColor: Color.PRIMARY_COLOR,
        padding:8,
        // borderWidth:1,
    },
    filterTypePanel:{
        alignItems:'flex-start',
        // borderWidth:1,
    },
    filterWherePanel:{
        alignItems:'flex-start',
        // borderWidth:1,
    },
    filterTitlePanle:{
        // borderWidth:1,
    },
    filterTitle:{
        fontSize:14,
        paddingTop:8,
        paddingBottom:8,
        color:'#dedede',
    },
    filterBtn:{
        width:'24%',

        borderColor:'#0ABB07',
        backgroundColor:'transparent',
        borderWidth:1,
        marginRight:4,

    },
    filterBtnActive:{
        backgroundColor:'#0ABB07',
        borderWidth:1,
    },
    filterTypeGroup:{
        flexDirection:'row',
        // borderWidth:1,
        // borderColor:'red',
    },
});

export default YuanwangMainScene;